<template>
  <zm-view ref="view" :scroll="false">
    <zm-navbar :is-back="!back" :border-bottom="false" title="商城">
      <view slot="left" class="flex items-center">
        <view class="flex items-center mr-24 transition" @click="toView('pages/utils/select-city/select-city')">
          <text class="font-30 mr-4">{{ cityName || "定位中..." }}</text>
          <u-icon name="arrow-down-fill" size="18rpx"></u-icon>
        </view>
      </view>
    </zm-navbar>
    <view v-if="tabList.length > 1" class="solid-top-2 bg-white">
      <zm-tabs v-model="tabKey" :list="tabList" text-key="categoryName" value-key="categoryId" sticky @change="handleTabChange"></zm-tabs>
    </view>
    <zm-list ref="list" :options="options" @load="handleLoad" @refresh="handleRefresh">
      <view class="px-24 grid gap-x-20" :class="mallTemp.listType == 1 ? 'grid-cols-1' : 'grid-cols-2'">
        <view v-for="(item, index) in list" :key="index">
          <goods-item :info="item" :zone-type="mallTemp.listType"></goods-item>
        </view>
      </view>
    </zm-list>
    <!-- 广告弹窗 -->
    <deco-ad-popup page="mallIndex"></deco-ad-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters } from "vuex"
import GoodsItem from "./components/goods-item/index"
export default {
  name: "mall-index",
  components: {
    GoodsItem
  },
  mixins: [page, hook],
  data() {
    return {
      options: {
        customNavbar: true
      },
      query: {
        categoryId: "",
        templateId: ""
      },
      mallTemp: {},
      tabList: [],
      tabKey: "",
      list: [] // 商品列表
    }
  },
  computed: {
    ...mapGetters(["cityName", "tabbar"]),
    back() {
      return this.tabbar?.list.some((item) => item.value === "mallIndex")
    }
  },
  watch: {
    cityName() {
      this.list = []
      this.query.categoryId && this.$refs.list.refresh()
    }
  },
  onLoad() {},
  methods: {
    async getTemp() {
      return new Promise(async (resolve) => {
        const res = await uni.$api.mall.getTemplate()
        this.mallTemp = res
        this.tabList = res?.category || []
        const item = this.tabList[0] || {}
        this.query.categoryId = item.categoryId || ""
        this.query.templateId = res.templateId
        this.$nextTick(() => {
          this.tabKey = item.categoryId
          resolve()
        })
      })
    },
    handleTabChange(e) {
      this.list = []
      this.query.categoryId = e.categoryId
      this.$refs.list.refresh()
    },
    async handleLoad({ page, pageSize, fail, success }) {
      try {
        !this.query.categoryId && (await this.getTemp())
        const query = { ...this.query, page, pageSize }
        const res = await uni.$api.mall.getCommodityList(query)
        this.list = [...this.list, ...res.list]
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    },
    async handleRefresh({ page, pageSize, fail, success }) {
      try {
        !this.query.categoryId && (await this.getTemp())
        const query = { categoryId: this.query.categoryId, templateId: this.mallTemp.templateId, page, pageSize }
        const res = await uni.$api.mall.getCommodityList(query)
        this.list = res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
